<%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator"
	prefix="decorator"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ page contentType="text/html; charset=UTF-8"%>
<decorator:usePage id="mainPage" />
<html>
<head>
<link href="<s:url value='/css/not-ie.css' />" rel="stylesheet"
	type="text/css">
<script type="text/javascript" src="<s:url value='/js/control.js' />"></script>
<script type="text/javascript" src="<s:url value='/jquery-ui-1.10.3.custom/js/jquery-1.9.1.js' />"></script>
<script type="text/javascript" src="<s:url value='/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js' />"></script>

<link rel="stylesheet" href="<s:url value='/jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.css' />" />
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
   
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var areaName = document.getElementsByName("areaName");
        var value = document.getElementsByName("value");
        var dsize =  parseInt("<s:property value='lstSearch.size()'/>",0);
        if(dsize==0){
			alert("ไม่พบข้อมูล");
         }
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'แปลง');
        data.addColumn('number', 'ปริมาณ');
        data.addRows(dsize);
        for(var i=0;i<dsize;i++){
    	   data.setCell(i, 0, areaName[i].value);
    	   data.setCell(i, 1, parseInt(value[i].value,0));
        }
     
        var options = {
          title: 'จำนวนผลที่เก็บเกี่ยว (ลูก)',
          vAxis: {title: 'แปลง',  titleTextStyle: {color: 'red'}}
        };
     
        var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }

      function setGraph() {
    		frm = document.statisticsForm;
    		frm.action = "<s:url value='/initGraph.action'/>";
    		frm.submit();
      }
      
    </script>
<style type="text/css">
.tab-bar {
	width: 100%;
	height: 100px;
	overflow: hidden;
}

.tab-body {
	float: left;
	width: 100%;
	vertical-align: top;
	overflow: hidden;
}
</style>
</head>
<body onload="javascript:sf();">
	<s:form id="statisticsForm" onsubmit="return savePage();" method="post"
		theme="simple" name="statisticsForm" cssClass="margin-zero" cssStyle="height:500px">
		<h1>รายงานผลการแสดงกราฟผลการผลิต</h1>
		<br>
		<br>
		<br>
		<table class="form"
			style="vertical-align: bottom; padding-top: 20px; margin-top: 10px;">
			<tr>
				<td width="50px;"></td>
				<td colspan="2">
				ปีที่ : 
				<select id="dateFrom" name="criteria.graphDateFrom">
					<%
					for (int i=2000;i<=2050;i++){
					%>
					<option value="<%=i%>"><%=i%></option>
					<%}%>
				</select>
				&nbsp;&nbsp;
				ถึงปีที่:
				<select id="dateTo" name="criteria.graphDateTo">
					<%
					for (int i=2000;i<=2050;i++){
					%>
					<option value="<%=i%>"><%=i%></option>
					<%}%>
				</select>
				 <input type="button" id="btnSave" onclick="setGraph();" value="แสดงรายงาน" />
				</td>
			</tr>
			<tr>
				<td colspan="2">&nbsp;</td>
				<td >
				<s:iterator value="lstSearch" status="status" var="result">
                  <input type="hidden" name="areaName" value="<s:property value='#result.areaName'/>"/>
				  <input type="hidden" name="value" value="<s:property value='#result.value'/>"/>
				</s:iterator>
				</td>
			</tr>
			<tr>
				<td colspan="3">
				<s:if test="#lstSearch.size()!=0">
					<div id="chart_div" style="width:800px;height:300px;display:inline-block"></div>
				</s:if>
				</td>
			</tr>
		</table>
		<s:token />
	</s:form>
</body>
</html>